<template>
  <div>
    <el-card>
      <p style="font-size: 20px">用户信息</p>
      <!-- 用户信息区域 -->
      <el-form
        class="form-location"
        label-width="150px"
        :label-position="labelPosition"
        :model="formLabelAlign"
      >
        <el-form-item label="手机号">{{ this.user.account }}</el-form-item>
        <el-form-item label="昵称">{{ this.userinfo.nickName }}</el-form-item>
        <el-form-item label="注册时间">{{
          this.user.createTime | dateFormat
        }}</el-form-item>
        <el-form-item label="登陆时间">{{
          this.user.lastLoginTime | dateFormat
        }}</el-form-item>
        <el-form-item label="驾龄">{{
          this.userinfo.driveAge | ageChange()
        }}</el-form-item>
        <el-form-item label="性别">{{
          this.userinfo.sex | sexChange()
        }}</el-form-item>
        <el-form-item label="所在城市">{{
          this.userinfo.city | getCity()
        }}</el-form-item>
        <el-form-item label="用户等级">{{ this.userinfo.rank }}</el-form-item>
      </el-form>
      <el-divider></el-divider>
      <p style="font-size: 20px">驾驶行为</p>
      <!-- 驾驶行为区域 -->
      <el-row :gutter="30">
        <el-col :span="5" :offset="2"
          ><span class="small-text">驾驶行为评分</span
          ><span class="medium-text">{{ this.driveData.score }}</span></el-col
        >
        <el-col :span="5"
          ><span class="small-text">平稳度</span
          ><span class="medium-text">{{
            this.driveData.stationarity
          }}</span></el-col
        >
        <el-col :span="5"
          ><span class="small-text">总里程</span
          ><span class="medium-text"
            >{{ this.driveData.hisMileage }}KM</span
          ></el-col
        >
        <el-col :span="5"
          ><span class="small-text">总时间</span
          ><span class="medium-text"
            >{{ this.driveData.allTime/60 }}min</span
          ></el-col
        >
      </el-row>

      <el-row :gutter="30" class="top">
        <el-col :span="5" :offset="2"
          ><span class="small-text">平均速度</span
          ><span class="medium-text">{{ this.driveData.hisVel }}</span>
          <span class="small-text">km/h</span></el-col
        >
        <el-col :span="5"
          ><span class="small-text">平均加速度</span
          ><span class="medium-text">{{ this.driveData.hisAcc }}</span>
          <span class="small-text">m/s<sup>2</sup></span></el-col
        >
        <el-col :span="5"
          ><span class="small-text">最大速度</span
          ><span class="medium-text">{{ this.driveData.maxVel }}</span>
          <span class="small-text">km/h</span></el-col
        >
        <el-col :span="5"
          ><span class="small-text">最大加速度</span
          ><span class="medium-text">{{ this.driveData.maxAcc }}</span>
          <span class="small-text">m/s<sup>2</sup></span></el-col
        >
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="5"
          ><span style="font-size: 20px">行驶信息记录</span></el-col
        >
        <el-col :span="2" :offset="10"><span class="in">日期筛选</span></el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="日期起始"
            end-placeholder="日期截至"
            value-format="yyyy-MM-dd"
            @change="search()"
          ></el-date-picker
        ></el-col>
      </el-row>

      <!-- 行驶信息记录区域 -->
      <el-table :data="driveList">
        <el-table-column label="日期" prop="trajectory.startTime">
          <template slot-scope="scope">
            {{ scope.row.trajectory.startTime | dateFormatNoTime }}
          </template>
        </el-table-column>
        <el-table-column label="起始位置" prop="trajectory.startPoint">
        </el-table-column>
        <el-table-column
          label="终点位置"
          prop="trajectory.endPoint"
        ></el-table-column>
        <el-table-column label="总里程">
          <template slot-scope="scope">
            {{ scope.row.drivedata.mileage | kmChange }}
          </template>
        </el-table-column>
        <el-table-column label="平均速度">
          <template slot-scope="scope">
            {{ scope.row.drivedata.averageSpeed | speedChange }}
          </template>
        </el-table-column>
        <el-table-column label="评分" prop="drivedata.score"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="openComment(scope.row.trajectory.id)"
              >批注</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="批注" :visible.sync="commentDialogVisible" width="80%">
      <quill-editor
        ref="myTextEditor"
        v-model="commentParam.comment"
        :options="editorOption"
        style="height: 350px; width: 900px; margin: 0 auto"
      ></quill-editor>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitComment">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- 批注框 -->
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  [{ indent: '-1' }, { indent: '+1' }], // 缩进
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: [] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ['clean'], // 清除文本格式
]
export default {
  data() {
    return {
      // 用户的id
      id: null,
      // FORM布局
      labelPosition: 'left',
      formLabelAlign: {
        name: '',
        region: '',
        type: '',
      },
      // user
      user: {},
      userinfo: {},
      // drive
      driveData: {},
      // 轨迹列表
      driveList: [],
      // 对轨迹列表做一次数据处理
      driveDoneList: [],
      // 查询条件
      query: {
        currentPage: 1,
        pageSize: 10,
        sTime: null,
        eTime: null,
      },
      total: 0,
      // 查询时间
      time: null,
      // 查询的时间条件
      timeRange: {
        sTime: null,
        eTime: null,
      },
      // 批注框
      commentDialogVisible: false,
      // 批注参数
      commentParam: {
        // 当前批注id
        id: null,
        // 当前评注
        comment: null,
      },

      // 富文本编辑器
      editorOption: {
        theme: 'snow', // or 'bubble'
        placeholder: '编辑评注内容',

        modules: {
          toolbar: {
            container: toolbarOptions,
            // container: "#toolbar",
            handlers: {
              image: function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              },
            },
          },
        },
      },
      //
    }
  },
  created() {
    // 创建页面时获取一次id
    this.getId()
    // 初始化数据
    this.getUser()
    this.getUserInfo()
    this.getUserData()
    this.getDriveList()
    //this.locationToAddress()
  },
  mounted() {},
  methods: {
    // 从路由跳转中获取数据
    getId() {
      this.id = this.$route.query.code
      console.log(this.id)
    },
    // id获取user
    async getUser() {
      const { data: res } = await this.$http.get(
        'users/query/user/id/' + this.id
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.user = res.data.data
      console.log(this.user)
    },
    // id获取userinfo
    async getUserInfo() {
      const { data: res } = await this.$http.get(
        'users/query/info/id/' + this.id
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.userinfo = res.data
      console.log(this.userinfo)
    },
    // id获取行驶数据
    async getUserData() {
      const { data: res } = await this.$http.get('rank/getData/' + this.id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.driveData = res.data
      console.log(this.driveData)
    },
    // id获取轨迹列表
    async getDriveList() {
      const { data: res } = await this.$http.get('/trajectory/' + this.id, {
        params: this.query,
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      console.log(res.data)
      this.driveList = res.data.data
      this.total = res.data.total
      // this.locationToAddress()
    },
    // 坐标点转化地址
    async locationToAddress() {
      var that = this
      AMap.plugin('AMap.Geocoder', function () {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国',
        })
        // 使用geocoder做地理/逆地理编码
        for (var i = 0; i < that.driveList.length; i++) {
          var location = that.driveList[i].trajectory.startPoint
          var arr = location.split(',')
          var lnglat = [arr[0], arr[1]]
          // var lnglat = [116.396574, 39.992706]
          console.log(lnglat)
          var j = i
          geocoder.getAddress(lnglat, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              console.log(result)
              console.log(that.driveList[j])
              that.driveList[j].trajectory.startPoint =
                result.regeocode.formattedAddress
              that.driveDoneList.push(that.driveList[j])
            }
          })
        }
      })
    },
    // 用户选择时间后触发搜索
    async search() {
      if (this.time !== null) {
        console.log(this.time)
        this.query.sTime = this.time[0]
        this.query.eTime = this.time[1]
        // this.time = null
        this.getDriveList()
        // const { data: res } = await this.$http.get(
        //   '/trajectory/query/' + this.id,
        //   {
        //     params: this.query,
        //   }
        // )
        // if (res.code !== 200) return this.$message.error('Error:' + res.message)
        // console.log(res.data)
        // this.driveList = res.data.data
        // this.total = res.data.total
      } else {
        this.query.sTime = null
        this.query.eTime = null
        this.getDriveList()
      }
    },
    //表格 分页单页切换
    handleSizeChange(newSize) {
      this.query.pageSize = newSize
      this.getDriveList()
    },
    //表格 分页页数切换
    handleCurrentChange(newPage) {
      this.query.currentPage = newPage
      this.getDriveList()
    },
    // 打开批注
    async openComment(id) {
      this.commentDialogVisible = true
      this.commentParam.id = id
      //初始化 加载一次评注内容
      const { data: res } = await this.$http.get(
        '/trajectory/comment/' + this.commentParam.id
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.commentParam.comment = res.data
      console.log(res)
    },
    // 提交批注
    async commitComment() {
      this.commentDialogVisible = false
      //上传保存
      const { data: res } = await this.$http.post('/trajectory/comment/add/', this.commentParam)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('批注成功!')
      this.commentParam.comment = null
      this.commentParam.id = null
    },
  },
  filters: {
    // 城市处理
    getCity: function (value) {
      if (!value) return ''
      let array = new Array()
      array = (value + '').split('/')
      if (array != null) {
        if (array.length >= 2) {
          return array[1]
        } else if (array.length == 1) {
          return array[0]
        }
      }
      return array
    },
    // 驾驶年龄
    ageChange: function (value) {
      if (!value) return ''
      return value + '年'
    },
    // 性别
    sexChange: function (value) {
      // if(!value) return ''
      if (value === 0) return '男'
      if (value === 1) return '女'
    },
    // 里程
    kmChange: function (value) {
      return value + 'km'
    },
    // 速度
    speedChange: function (value) {
      return value + 'KM/h'
    },
  },
}
</script>

<style lang="less" scope>
.form-location {
  margin-left: 180px;
}

.small-text {
  font-size: 13px;
}

.medium-text {
  margin-left: 25px;
  font-size: 20px;
}

.top {
  margin-top: 50px;
}

.in {
  font-size: 14px;
  margin-top: 5px;
  margin-left: 25px;
}
</style>